﻿@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"
        name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <title>台风路径</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?ak=v1HSNrafV1En2G31ctO1IwTS&v=2.0"></script>
    <script type="text/javascript" src="/Scripts/jquery-1.7.1.min.js"></script>
    <style>
        .legend
        {
            position: absolute;
            bottom: 10px;
            z-index: 999;
            font-size: 12px;
            box-shadow: 1.5px 1.5px 2px #777;
        }
        
        .legend #legendHead
        {
            height: 26px;
            background-color: #39AED5;
            line-height: 26px;
            color: #fff;
            font-size: 13.5px;
            font-weight: bold;
            padding-left: 5px;
        }
        
        .legend #legendHead span
        {
            height: 9px;
            width: 20px;
            display: inline-block;
            margin: 8px 10px;
            float: right;
            background: url(/Content/images/icon.png) no-repeat 0px -68px;
        }
        
        .legend #legendHead.open span
        {
            background-position: 0px -78px;
        }
        
        .legend #legendBody
        {
            display: none;
        }
        
        .legendTitle
        {
            background: #fff;
            line-height: 25px;
            padding: 0 6px;
            font-weight: bold;
            border-bottom: solid 1px #ccc;
        }
        
        .legend ul
        {
            margin: 0;
            padding: 5px 0 5px 5px;
            width: 170px;
            float: left;
            background-color: rgb(240, 240, 240);
        }
        
        .legend ul li
        {
            margin: 0px;
            padding: 3px 0;
            width: 85px;
            float: left;
            list-style-type: none;
        }
    </style>
</head>
<body>
    <div id="map_typhoon" style="height: 100%;">
    </div>
    <div class="legend">
        <div id="legendHead">
            <span></span>图例</div>
        <div id="legendBody">
            <div class="legendTitle">
                台风等级</div>
            <ul>
                <li>
                    <img src="/Content/images/typhoon/t-01.png" />
                    热带低压</li>
                <li>
                    <img src="/Content/images/typhoon/t-02.png" />
                    热带风暴</li>
                <li>
                    <img src="/Content/images/typhoon/t-03.png" />
                    强热带风暴</li>
                <li>
                    <img src="/Content/images/typhoon/t-04.png" />
                    台风</li>
                <li>
                    <img src="/Content/images/typhoon/t-05.png" />
                    强台风</li>
                <li>
                    <img src="/Content/images/typhoon/t-06.png" />
                    超强台风</li>
            </ul>
            <div class="legendTitle">
                预报台</div>
            <ul>
                <li><span style="color: #FF4050">━ ━</span> 中国</li>
                <li><span style="color: #FF66FF">━ ━</span> 中国香港</li>
                <li><span style="color: #43FF4B">━ ━</span> 日本</li>
                <li><span style="color: #669999">━ ━</span> 韩国</li>
                <li><span style="color: #40DDFF">━ ━</span> 美国</li>
            </ul>
        </div>
    </div>
</body>
</html>
@*<script src="/Scripts/leaflet/leaflet.js"></script>
    <script src="/Scripts/boundary.js"></script>
    <script src="/Scripts/typhoon.min.js"></script>*@
<script>
    $(function () {
        $("#legendHead").bind("click", function () {
            if ($(this).hasClass("open")) {
                $(this).removeClass("open");
                $("#legendBody").hide("slow");
            }
            else {
                $(this).addClass("open");
                $("#legendBody").show("slow");
            }
        });
        //loadData(58567);
        //getBoundary();
        
         var map = new BMap.Map("map_typhoon"); //创建MAP实例
        var centerPoint = new BMap.Point(@ViewBag.Lon,@ViewBag.Lat);
         map.centerAndZoom(centerPoint, 12); //初始化地图，设置中心坐标和地图级别
    //map.addControl(new BMap.ZoomControl()); //添加地图缩放控件
    });
</script>
